<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Document</title>
    <!-- 引入样式 -->
    <link href="../../plugins/element-ui/index.css" rel="stylesheet"/>
    <link href="../../styles/common.css" rel="stylesheet"/>
    <link href="../../styles/page.css" rel="stylesheet"/>
</head>
<body>
<div id="room-add-app" class="addBrand-container">
    <div class="container">
        <el-form
                ref="ruleForm"
                :inline="false"
                :model="ruleForm"
                :rules="rules"
                class="demo-ruleForm"
                label-width="180px"
        >
            <el-form-item label="房号:" prop="roomNumber">
                <el-input
                        :disabled="true"
                        v-model="ruleForm.roomNumber"
                        maxlength="30"
                        placeholder="请输入房号(X期X单元X号楼X层X户)"
                />
            </el-form-item>
            <el-form-item label="开始日期:" prop="startDate">
                <el-date-picker
                        v-model="ruleForm.startDate"
                        type="month"
                        placeholder="选择开始日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="截止日期:" prop="endDate">
                <el-date-picker
                        v-model="ruleForm.endDate"
                        type="month"
                        placeholder="选择截止日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="用电量:" prop="powerConsumption">
                <el-input
                        v-model="ruleForm.powerConsumption"
                        maxlength="30"
                        placeholder="请输入用电量"
                />
            </el-form-item>
            <el-form-item label="用水量:" prop="waterConsumption">
                <el-input
                        v-model="ruleForm.waterConsumption"
                        maxlength="30"
                        placeholder="请输入用水量"
                />
            </el-form-item>

            <div class="subBox address">
                <el-form-item>
                    <el-button @click="goBack()"> 取消</el-button>
                    <el-button
                            type="primary"
                            @click="generateChargeForm('ruleForm')"
                    >
                        生成收费单
                    </el-button>
                </el-form-item>
            </div>
        </el-form>

        <!--弹出收费单-->
        <el-dialog title="收费单" :visible.sync="dialogTableVisible" center>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="序号"></el-table-column>
                <el-table-column prop="chargeType" label="收费类型">
                </el-table-column>
                <el-table-column prop="amount" label="数量"></el-table-column>
                <el-table-column prop="money" label="金额"></el-table-column>
            </el-table>
            <span>等待业主支付费用...</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取消</el-button>
            <el-button type="primary" @click="submitChargeOrder('ruleForm')">支付完成</el-button>
          </span>
        </el-dialog>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/room.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: "#room-add-app",
        data() {
            var isLaterThanStartDate = (rule, value, callback) => {
                console.log("截止日期")
                console.log(value)
                console.log("开始日期")
                console.log(this.ruleForm.startDate)
                let endDate = new Date(value);
                let startDate = new Date(this.ruleForm.startDate);

                if (value === '') {
                    callback(new Error('请选择截止日期'));
                } else if (endDate.getTime() <= startDate.getTime()) {
                    callback(new Error('截止日期必须晚于开始日期!'));
                } else {
                    callback();
                }
            }
            return {
                id: "",
                employeeId: "",
                actionType: "",
                dialogTableVisible: false,
                ruleForm: {
                    roomNumber: "",
                    startDate: "",
                    endDate: "",
                    powerConsumption: "",
                    waterConsumption: "",
                },
                tableData: [
                    {
                        id: "1",
                        chargeType: "物业费",
                        amount: "98.6",
                        money: "98.60",
                    },
                    {
                        id: "2",
                        chargeType: "电梯费",
                        amount: "2",
                        money: "10.00",
                    },
                    {
                        id: "3",
                        chargeType: "水费",
                        amount: "6",
                        money: "4.20",
                    },
                    {
                        id: "4",
                        chargeType: "电费",
                        amount: "102",
                        money: "81.60",
                    },
                    {
                        id: "合计",
                        chargeType: "",
                        amount: "",
                        money: "194.40",
                    },
                ],
                rules: {
                    // //姓名
                    roomNumber: [{required: true, trigger: "blur"}],
                    startDate: [{required: true, trigger: "blur"}],
                    endDate: [{required: true, validator: isLaterThanStartDate, trigger: "blur"}],
                    powerConsumption: [{
                        required: true,
                        validator: checkFloatNumber,
                        trigger: "blur",
                    }],
                    waterConsumption: [{
                        required: true,
                        validator: checkFloatNumber,
                        trigger: "blur",
                    }],
                },
            };
        },
        computed: {},
        created() {
            this.employeeId = JSON.parse(localStorage.getItem('userInfo')).id
            this.id = requestUrlParam("id");
            if (this.id) {
                this.init();
            }
        },
        mounted() {
        },
        methods: {
            async init() {
                queryRoomById(this.id).then((res) => {
                    console.log(res);
                    if (String(res.code) === "1") {
                        console.log(res.data);
                        this.ruleForm = res.data;
                        //把起始日期传入到表单中
                        if (res.data.validDate!=null){
                            this.ruleForm.startDate = res.data.validDate;
                        }
                    } else {
                        this.$message.error(res.msg || "操作失败");
                    }
                });
            },

            //生成收费单
            generateChargeForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //已知房号,开始日期,截止日期,用电量,用水量 ruleForm
                        const params = {
                            ...this.ruleForm,
                            employeeId: this.employeeId,
                        };
                        queryChargeInfo(params).then((res) => {
                            if (res.code === 1) {
                                this.tableData = res.data;
                                this.$message.success("收费数据查询成功！");
                            } else {
                                this.$message.error("操作失败");
                            }
                        })
                        this.dialogTableVisible = true;
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            //提交收费单
            submitChargeOrder(formName) {
                this.dialogTableVisible = false;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //已知房号,开始日期,截止日期,用电量,用水量 ruleForm
                        const params = {
                            ...this.ruleForm,
                            employeeId: this.employeeId,
                        };
                        submitChargeOrder(params).then((res) => {
                            this.tableData = [];
                            if (res.code === 1) {
                                this.$message.success("支付成功!");
                                this.goBack();
                            } else {
                                this.$message.error("支付失败");
                            }
                        })
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            goBack() {
                window.parent.menuHandle(
                    {
                        id: "5",
                        url: "/backend/page/room/list.html",
                        name: "收费管理",
                    },
                    false
                );
            },
        },
    });
</script>
</body>
</html>
